<template>
<!--  <el-segmented class="nav" v-model="value" :options="options">-->
<!--    <template #default="{ item }">-->
<!--      <div @click="change(item.value)">-->
<!--        <p>{{ item.label }}</p>-->
<!--      </div>-->
<!--    </template>-->
<!--  </el-segmented>-->
  <Login1 v-if="value=='1'"/>
  <Login2 v-if="value=='2'"/>
  <Login3 v-if="value=='3'"/>
</template>
<script setup>
import Login1 from "./model/Login1.vue"
import Login2 from "./model/Login2.vue"
import Login3 from "./model/Login3.vue"
import {ref} from 'vue'
import {useRouter} from 'vue-router'

const router = useRouter()
/**
 * 顶部导航
 * @type {Ref<UnwrapRef<string>, UnwrapRef<string> | string>}
 */
const value = ref('1')
const change = (id) => {
  value.value = id
}
const options = [
  {
    label: '样式1',
    value: '1',
  },
  {
    label: '样式2',
    value: '2',
  },
  {
    label: '样式3',
    value: '3',
  },
]
</script>
<style scoped lang="scss">
.nav {
  position: fixed;
  top: 0;

  p {
    margin: 6px;
  }
}
</style>
